<template>
  <div>
    <!-- 题库统计 -->
    <el-row :gutter="20">
      <el-col :span="20"><div>题库统计</div></el-col>
      <el-col :span="4"><div class="manager_style manager_hover" @click="bankManager">题库管理 <span style="padding-left: 5px;">></span></div></el-col>
    </el-row>
    <el-divider></el-divider>
    <div id="chart" style="width: 100%;height:500px"></div>
    <!-- 题库管理 -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {bankAnalysis} from '@/api/system/system.js'
export default {
  data() {
    return {
      charts: []
    }
  },
  async mounted() {
    const {data: res} = await bankAnalysis()
    if (res.code === 200) {
      this.charts = res.data.charts
    }
    this.charts.forEach(chart => {
      this.initChart(chart)
    })
  },
  methods: {
    bankManager() {
      this.$router.push('/bankManager')
    },
    initChart(data) {
      const myChart = echarts.init(document.getElementById(data.container))
      myChart.setOption({
        tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['试卷数量', '试题数量']
      },
      xAxis: [
        {
          type: 'category',
          data: data.coordinate,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '试题数量'
        },
        {
          type: 'value',
          name: '试卷数量'
        }
      ],
      series: [
        {
          name: '试卷数量',
          type: 'line',
          yAxisIndex: 1,
          data: data.papers
        },
        {
          name: '试题数量',
          type: 'line',
          yAxisIndex: 0,
          data: data.problems
        }
      ]
      })
    }
  }

}
</script>

<style lang="css" scpoed>
.manager_style {
  text-align: left;
  color: black;
  font-weight: 600;
}
.manager_hover:hover {
  cursor: pointer;
}
</style>